<template>
	<view>
		<view class="payBalance">
			<view class="balance">
				<view class="nav Grid Grid--center Grid--justifySpaceBetween">
					<u-icon @click="rightClick" name="arrow-left" color="#ffffff" size="18"></u-icon>
					<view @click="rechargeRecord">充值记录</view>
				</view>
				<view class="overallBalance">总余额</view>
				<view class="money">{{userInfo.balance}}元</view>
				
			</view>
			<view class="balance_pay">
				<view class="select_money">
					<u-grid :border="false" col="3">
						<u-grid-item bgColor="#fff" v-for="(item,index) in moneyList" :key="index"
							@click="amount_id = item.amount_id" :class="amount_id==item.amount_id?'selectStyle':''">
							<text class="grid-text">充{{item.recharge}}元</text>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="pay_info">
					<view class="agreement">
						<u-checkbox-group v-model="checked">
							<u-checkbox activeColor="#eb2e29" shape="circle" name="充值或消费即表示已阅读并同意"></u-checkbox>
						</u-checkbox-group>
						
						充值或消费即表示已阅读并同意<text @click="getSkip">《用户购买协议》</text>
					</view>
					<view class="pay-button">
						<u-button class="bj-color"
							@click="clickPay">确认支付&nbsp;&nbsp;&yen;{{ moneyList[amount_id-1].money }}</u-button>
					</view>
					<view class="tips">
						温馨提示:<br>
						<view>充值成功后无法退款和提现，仅供本平台消费使用</view>
					</view>
				</view>
			</view>
			
			<!-- 支付方式弹窗 -->
			<pay-popup ref="popup" :price="moneyList[amount_id-1].money * 1" :data="objData" @buyNote="buyNote"
				@confirmPay="confirmPay"></pay-popup>
			<!-- 购买须知 -->
			<u-popup :show="show" @close="close" mode="center" :closeOnClickOverlay="false" :safeAreaInsetBottom="false"
				bgColor="transparent">
				<view class="buyHint">
					<view>
						1.本平台仅为内容发布平台，非购彩平台，不提供任何售彩服务。
						<br />
						2.平台虚拟而一经充值成功，只可用于购买平台付费阅读信息服务，不支持提现、退款、转赠流通、兑换、购彩操作。
						<br />
						3.使用本充值服务前，请确认您已年满 18 周岁。若您为未成年人，您使用本服务的行为将被视为已获得监护人认可。
						<br />
						4.专家发布的内容仅代表发布者的个人观点，仅作为交流心得之用，亦不代表平台立场。
					</view>
					<u-button type="primary" :text="`我已知晓`" @click="close"></u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex";
	import payPopup from '@/components/pay-popup/pay-popup.vue'
	import {
		rechargeConfig,
		rechargePay,
		rechargeInfo
	} from '@/service/index'
	import {
		removeParam,
		parseQuery
	} from '@/utils/index.js'
	import navConfig from './config/navConfig.js'

	export default {
		components: {
			payPopup
		},
		data() {
			return {
				navConfig,
				show: false, //购买悉知
				objData: {},
				checked: ['充值或消费即表示已阅读并同意'],
				amount_id: 1,
				moneyList: [30, 50, 100, 300, 500, 1000]
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				token: state => state.login.token,
				redirect_uri: state => state.login.redirect_uri
			}),
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.$store.dispatch('login/userinfoAction');
				rechargeConfig().then(res => {
					if (res.code == 200) {
						this.moneyList = res.data
					}
				})
			},
			buyNote() {
				this.show = true
			},
			close() {
				this.show = false
			},
			// 点击支付弹窗
			clickPay() {
				console.log(this.checked, 'this.checked')
				if (this.checked.length == 0) {
					uni.showToast({
						title: '请勾选购买协议',
						icon: 'none'
					})
					return
				}
				this.$refs.popup.open()
			},
			// 跳转到购买协议
			getSkip() {
				let opt = {
					type: 'USER_PAY'
				}
				uni.navigateTo({
					url: `/pages/agreement/agreement?opt=${JSON.stringify(opt)}`
				})
			},
			// 弹窗选择支付方式确认支付
			confirmPay(obj) {
				this.pay(obj)
			},
			pay(obj) {
				if (this.userInfo.cover) {
					// 防封
					const {
						appid
					} = parseQuery()
					let http =
						`${this.redirect_uri}/user/#/pages/pay/pay/?appid=${appid}&amount_id=${this.amount_id}&content_id=&sale_id=&pay_type=${obj.payType}&coupon_id=&key=pc&token=${this.token}&redirect_uri=${encodeURIComponent(window.location.origin)}&other=${new Date().getTime()}`
					window.location.href = http
				} else {
					// 常规
					let _this = this
					let params = {
						amount_id: this.amount_id,
						pay_type: obj.payType,
					}
					uni.showLoading({
						title: '支付中...'
					})
					rechargePay(params).then(resp => {
						if (resp.code == 200) {
							// 判断是否已经支付 注:处理特殊情况,新用户绑定手机享受减免金额大于或等于本单进行的情况
							if (obj.payType == 1) {
								WeixinJSBridge.invoke('getBrandWCPayRequest', resp.data.pay_sdk, function(res) {
									if (res.err_msg == "get_brand_wcpay_request:ok") {
										uni.showLoading({
											title: '支付查询中...'
										})
										_this.$refs.popup.close()
										_this.timer = setInterval(function() {
											rechargeInfo({
												order_no: resp.data.order.order_no
											}).then(result => {
												if (result.code == 200) {
													if (result.data.pay_status == 1) {
														_this.$store.dispatch(
															'login/userinfoAction');
														clearInterval(_this.timer)
														uni.hideLoading()
													}
												} else {
													clearInterval(_this.timer)
													uni.hideLoading()
												}
											})
										}, 1000);
									} else {
										uni.showToast({
											title: '已取消支付',
											icon: 'none'
										})
										setTimeout(async () => {
											uni.hideLoading()
										}, 1500)
									}
								});
							}
							if (obj.payType == 2) {
								uni.navigateTo({
									url: `/pages/ali_pay/ali_pay?appid=${this.userInfo.appid}&content_id=&order_no=${resp.data.order.order_no}&token=${this.token}`
								});
							}
						} else {
							uni.hideLoading()
						}
					})
				}
			},
			rechargeRecord() {
				uni.navigateTo({
					url: `/pages/user/rechargeRecord/rechargeRecord?appid=${this.userInfo.appid}`
				})
			},
			// 右侧点击事件
			rightClick() {
				uni.navigateBack(-1)
			},
		}
	}
</script>
<style lang="scss" scoped>
	.payBalance {
		height: 100vh;
		.balance {
			height: 272px;
			background: url('@/static/images/recharge.png') no-repeat;
			background-size: 100% 272px;
			.nav{
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 14px;
				color: #FFFFFF;
				line-height: 55px;
				height: 55px;
				padding: 0 19px;
			}
			.overallBalance{
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 12px;
				color: #FFFFFF;
				line-height: 16px;
				padding: 51px 0 0 36px;
			}
			.money{
				padding: 12px 0 0 36px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 600;
				font-size: 23px;
				color: #FFFFFF;
				line-height: 31px;
			}
		}
		
		.balance_pay{
			background: #FFFFFF;
			border-radius: 10px 10px 0px 0px;
			position: absolute;
			top: 257px;
			width: 100%;
			height: calc(100vh - 257px);
		}

		.select_money {
			&>view {
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				font-size: 18px;
				color: #3F8EFF;
				// background: #FFFFFF;
				text-align: center;
				line-height: 70px;
				border-radius: 5px;
				// margin-bottom: 7px;
				width: calc(100%);
				padding: 30px 24px;
				&>view {
					width: calc(33.33% - 5px) !important;
					border-radius: 5px;
					margin-bottom: 7px;
					background: #FFFFFF;
					border-radius: 5px;
					border: 1px solid #E5E5E5;
					font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
					font-weight: 400;
					font-size: 16px;
					color: #222222
				}

				&>view:nth-child(2),
				&>view:nth-child(5) {
					margin: 0 7px 7px;
				}
			}
		}
		.pay_info {
			.agreement {
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 12px;
				color: #666666;
				display: flex;
				align-items: center;
				margin-bottom: 25px;
				padding: 0 28px;
				::v-deep .u-checkbox {
					.u-checkbox__icon-wrap {
						border-radius: 100%;
						width: 22px !important;
						height: 22px !important;
					}
				}

				text {
					color: #EB2E29;
				}
			}
			.pay-button {
				padding: 0 24px;
				.bj-color {
					width: 100%;
					line-height: 42px;
					text-align: center;
					border-radius: 800px;
					background: #EB2E29;
					height: 45px;
					line-height: 45px;
					background: #EB2E29;
					border-radius: 45px;
					font-size: 18px;
					color: #FFFFFF;
				}
			}
			.tips {
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 12px;
				color: #666666;
				line-height: 20px;
				margin-top: 36px;
				padding: 0 34px;
			}
		}
		.selectStyle {
			background: #FCEAEA !important;
			border-radius: 5px !important;
			border: 2px solid #EB2E29 !important;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi !important;
			font-weight: 500 !important;
			font-size: 16px !important;
			color: #EB2E29 !important;
		}
	}
	.buyHint {
		width: 90%;
		background: #fff;
		margin: auto;
		border-radius: 4px;
		padding: 16px;
		line-height: 22px;
		&>view {
			font-size: 14px;
		}
		&>button {
			width: 100px;
			margin-top: 20px;
		}
	}
</style>